﻿@{
    ViewBag.Title = "Index";
}
<style type="text/css">
    .t-grid td
    {
        line-height: 10px;
    }
</style>
<br />
<h2>
    FAQ</h2>
<br />
<div>
    @(Html.Telerik().Grid<Century.Models.Common.FAQ>()
        .Name("Grid")
                .DataKeys(keys => keys.Add(c => c.Id))
                .ToolBar(commands =>
                {
                    commands.Insert().ButtonType(GridButtonType.ImageAndText).ImageHtmlAttributes(new { style = "margin-left:0" });
                })
        .Columns(columns =>
        {
            columns.Bound(o => o.Id).Hidden().ReadOnly(true);
            columns.ForeignKey(o => o.CountrySiteId,(System.Collections.IEnumerable)ViewBag.AccessibleSites, "Id", "Name").Sortable(true).Width(80).Title("Country");
            columns.Bound(o => o.Section).Width(50);
            columns.ForeignKey(o => o.Type, (System.Collections.IEnumerable)ViewBag.FAQType, "Value", "Text").Sortable(true).Width(25).Title("Application");
            columns.Bound(o => o.Question).EditorTemplateName("MultiLineEditor").Width(150);
            columns.Bound(o => o.Answer).EditorTemplateName("MutliLineEditor").Encoded(false).Width(350);
            columns.Command(command =>
            {
                command.Edit().ButtonType(GridButtonType.Image);
                command.Delete().ButtonType(GridButtonType.Image);
            }).Width(25);
        })
                 .ClientEvents(clientEvents =>
                 {
                     clientEvents.OnEdit("editClick");
                     
                 })
                .DataBinding(dataBinding => dataBinding.Ajax()
                                       .Select("GetCountryMt4FAQList", "Mt4FAQ" )
                                       .Update("EditCountryFAQ", "Mt4FAQ")
                                       .Insert("InsertCountryFAQ", "Mt4FAQ")
                                       .Delete("DeleteCountryFAQ", "Mt4FAQ")

                 )

                    .Groupable()
                    .Editable(editing => editing.Mode(GridEditMode.PopUp).TemplateName("TemplateFAQModel").FormHtmlAttributes(new { style = "width:200px" }))
                    .Pageable(pagingSetting => pagingSetting.PageSize(30))
                    .Sortable(sortable => sortable.OrderBy(order => order.Add(o => o.CountrySite.Path).Descending()))
                    .Scrollable(c => c.Height("550px"))
                    .Resizable(config =>
                    {
                        config.Columns(true);
                    })
                                .Reorderable(config =>
                                {
                                    config.Columns(true);
                                })
                                .ColumnContextMenu()
                    )
</div>
<script type="text/javascript">
    function editClick(e) {

        $('#Question').click('Question', showHtml);
        $('#Answer').click('Answer', showHtml);
        $(e.form).closest(".t-window-content").width(650).height(650);
        var popup = $("#" + e.currentTarget.id + "PopUp");
        popup.css({ "left": ($(window).width() / 2 - $(popup).width() / 2) + "px", "top": ($(window).height() / 2 - $(popup).height() / 2) + "px" });
    }
       
</script>
